<template>
  <div class="login wrapper" v-page-title="'登录 - 后台管理系统'">
    <div class="container">
      <section class="single-login">
        <div class="banner">
          <div class="banner-background">
            <img src="../assets/images/login_banner.png" alt="后台管理系统背景" class="background-img"/>
          </div>
        </div>
        <!-- 登录 -->
        <div class="slider-login" id="slider-login">
          <div class="slider-login-wrapper">
            <div class="item" :class="{'focus': fieldClass.usernameFocus, 'error': fieldClass.usernameError }">
              <div class="label"><span class="glyphicon glyphicon-user"></span></div>
              <div class="text">
                <input type="text" name="userName" autocomplete="off" v-model.trim="loginForm.userName" placeholder="请输入账号" v-focus @focus="fieldClass.usernameFocus = true" @blur="fieldClass.usernameFocus = false" @keydown="fieldClass.usernameError=false; errorMsg=''" maxlength="30"/>
              </div>
            </div>
            <div class="item" :class="{'focus': fieldClass.passwordFocus, 'error': fieldClass.passwordError }">
              <div class="label"><span class="glyphicon glyphicon-lock"></span></div>
              <div class="text">
                <input type="password" name="password" autocomplete="off" v-model="loginForm.password" placeholder="请输入密码" @focus="fieldClass.passwordFocus = true" @blur="fieldClass.passwordFocus = false" @keydown="fieldClass.passwordError=false; errorMsg=''" maxlength="30"/>
              </div>
            </div>
            <div class="item item-half" :class="{'focus': fieldClass.codeFoucs, 'error': fieldClass.codeError }">
              <div class="label"><span class="glyphicon glyphicon-qrcode"></span></div>
              <div class="text">
                <input type="text" name="code" autocomplete="off" v-model.trim="loginForm.code"  placeholder="请输入验证码" @focus="fieldClass.codeFoucs = true" @blur="fieldClass.codeFoucs = false" @keydown="fieldClass.codeError=false; errorMsg=''" @keyup.enter="doLogin" maxlength="4"/></div>
              <div class="captcha">
                <img src="#" id="captchaImg" height="40" width="77" onclick="javascript:;" alt="点击更换" />
                <a href="javascript:;" @click="refreshCaptcha">
                  换一张
                  <span class="refresh icon-refresh"></span>
                </a>
              </div>
            </div>
            <div class="errorMsg">{{errorMsg}}</div>
            <div class="submit">
              <a href="javascript:;" class="btn btn-primary " @click="doLogin">进&nbsp;&nbsp;入</a>
              <a href="javascript:;" class="btn btn-default" @click="doReset">重&nbsp;&nbsp;置</a>
            </div>
          </div>
        </div>
        <!-- 登录 end -->
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  mounted: function () {
    var self = this;
    this.$nextTick(function () {
      self.refreshCaptcha();
    });
  },
  data () {
    return {
      loginForm: {
        userName: '',
        password: '',
        code: '',
        uuid:''
      },
      fieldClass : {
        usernameFocus: false,
        passwordFocus: false,
        codeFoucs: false,
        usernameError: false,
        passwordError: false,
        codeError: false
      },
      errorMsg: ''
    }
  },
  methods: {
    refreshCaptcha:function () {
      var self = this;
      self.$doGet("/captcha/image", null, function(respData){
          if(respData.code==10000){
             $('#captchaImg').attr("src","data:image/jpeg;base64," + respData.data);
          }
      });
      self.$doGet("/captcha/uuid", null, function(respData){
        if(respData.code==10000){
          self.loginForm.uuid = respData.data;
        }
      });
    },
    doLogin: function () {
      var self = this;
      if (self.$isLockedButton('login-form')) {
        return;
      }
      if (!self.loginForm.userName) {
        self.errorMsg = '请填写账号';
        self.fieldClass.usernameError = true;
        self.showErrorAnimate($('input[name="userName"]'));
        return;
      }
      if (!self.loginForm.password) {
        self.errorMsg = '请填写密码';
        self.fieldClass.passwordError = true;
        self.showErrorAnimate($('input[name="password"]'));
        return;
      }
      if (!self.loginForm.code) {
        self.errorMsg = '请填写验证码';
        self.fieldClass.codeError = true;
        self.showErrorAnimate($('input[name="code"]'));
        return;
      }
      if (self.loginForm.code.length < 4) {
        self.errorMsg = '验证码小于4位数';
        self.fieldClass.codeError = true;
        self.showErrorAnimate($('input[name="code"]'));
        return;
      }
      self.$lockButton('login-form');
      $('a.btn-primary').html('进入中...').css({background:"#1e7ab7"});
      $("body").css({cursor: 'wait'});
      self.$doPost('/admin/login', self.loginForm, function(resp) {
        self.$unlockButton('login-form');
        $("body").css({cursor: ''});
        if (resp && resp.code === self.global_config.SUCCESS_CODE) {
          // 保存当前登录用户信息
          self.$clearSessionCache();
          self.$saveStorage('realName', resp.data.realName);
          self.$saveStorage('userName', resp.data.userName);
          self.$saveStorage('permissions', resp.data.permissionsList);
          self.$goDefaultPage();
        } else if (resp && resp.message) {
          $('a.btn-primary').html('进&nbsp;&nbsp;入');
          self.errorMsg = resp.message;
        }
      });
    },
    showErrorAnimate: function ($obj) {
      $obj.focus().parents('.item').addClass('shake');
      setTimeout(function(){$obj.focus().parents('.item').removeClass('shake')}, 200);
    },
    doReset: function () {
      var self = this;
      if (self.$isLockedButton('login-form')) {
        return;
      }
      self.loginForm.userName = '';
      self.loginForm.password = '';
      self.loginForm.code = '';
      self.fieldClass.usernameError = false;
      self.fieldClass.passwordError = false;
      self.fieldClass.codeError = false;
      self.errorMsg = '';
      $('input[name="userName"]').focus();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrapper{top:0;}
.single-login .banner{color:#fff;text-align:center;height:360px;}
.single-login .banner .banner-background{min-width:1100px;overflow:hidden;position:relative;height:360px;}
.single-login .banner .banner-background .background-img{width:1920px;z-index:-1;height:360px;text-align:center;margin:0 0 0 -960px;top:0;left:50%;position:absolute;}
.slider-login{position:relative;min-width:1100px;overflow:hidden;height:400px;}
.slider-login-wrapper{position:absolute;width:413px;left:50%;margin:0 0 0 -206px;text-align:center;}
.slider-login .item{border:1px solid #ddd;margin-top:20px;position:relative;}
.slider-login .item:hover{border:1px solid #337ab7;}
.slider-login .item-half{width:60%;}
.slider-login .label{float:left;height:40px;width:40px;line-height:40px;margin:-1px;background:#337ab7;padding:0;border-radius:0;font-size:18px;color:#fff;}
.slider-login .text{overflow:hidden;position:relative;color:#ddd;}
.slider-login .text input, .login-tab .text input{height:38px;line-height:20px;padding:9px;width:100%;border:0;position:relative;z-index:1;background:none;outline:none;color:#333;}
.slider-login .focus,.slider-login .focus .label{border-color:#337ab7;}
.slider-login .error,.slider-login .error:hover,.slider-login .error .label{border-color:#ff0000;}
.slider-login .error .label{background:#ff0000;}
.slider-login .placeholder, .login-tab .placeholder{position:absolute;left:10px;top:0;line-height:38px;color:#999;}
.slider-login .icon-man span, .slider-login .icon-password span, .slider-login .icon-captcha{display:block;height:24px;width:24px;text-indent:-999px;overflow:hidden;margin:7px auto;}
.slider-login .icon-captcha{background-position:-174px -206px;}
.slider-login .forgot{overflow:hidden;padding:20px 0;}
.slider-login .forget{float:right;}
.slider-login .forget a{margin:0 5px;color:#444;font-size:12px;}
.slider-login .submit{overflow:hidden;width:100%;padding-top:30px;}
.slider-login .submit a{padding:8px;border-radius:0;width:48%;float:left;font-size:18px;}
.slider-login .submit a:last-child{margin-left:4%;}
.slider-login .captcha{position:absolute;top:0;margin:0 0 0 10px;left:100%;width:62%;}
.slider-login .captcha img{height:40px;width:90px;margin:-1px 4px 0 0;overflow:hidden;float:left;}
.slider-login .captcha a{padding:11px 0;color:#999;display:inline-block;position:relative;}
.slider-login .refresh{font-size:14px;color:#999;position:absolute;top:50%;right:0;margin-top:-7px;}
.slider-login .errorMsg{color:#ff0000;text-align:left;padding-top:10px;margin-bottom:-20px;}
.slider-login .shake{-webkit-animation:shake-horizontal 200ms;-ms-animation:shake-horizontal 200ms;animation:shake-horizontal 200ms;}


/*新增*/
.slider-login .submit{position:relative;}
.slider-login .submit a{display:inline-block;vertical-align:top;}
.slider-login .submit .enter{padding:0;line-height:40px;font-size:18px;color:#fff;width:205px;height:40px;}
.slider-login .submit .forget{font-size:14px;position:absolute;top:5px;right:35px;}
.slider-login .reset a{width:43.4%;margin:30px auto 0;font-size:18px;padding:10px;}
.slider-login .newCaptcha{width:100%;left:90%;}
.slider-login .newCaptcha a{color:#fff;text-align:center;padding:8px 30px;display:inline-block;font-size:14px;}
.slider-login .newCaptcha .again{position:absolute;right:-100px;top:0;background-color:#777}


@-webkit-keyframes shake-horizontal {
  0% {-webkit-transform: translate(0px, 0px)}
  20% {-webkit-transform: translate(5px, 0px)}
  40% {-webkit-transform: translate(-5px, 0px)}
  60% {-webkit-transform: translate(5px, 0px)}
  80% {-webkit-transform: translate(-5px, 0px)}
}
@keyframes shake-horizontal {
  0% {transform: translate(0px, 0px)}
  20% {transform: translate(5px, 0px)}
  40% {transform: translate(-5px, 0px)}
  60% {transform: translate(5px, 0px)}
  80% {transform: translate(-5px, 0px)}
}
</style>
